<template>
	<div style="margin:20px 10px 10px 10px;">
		<span class="title_span">图书推荐</span>
		<div class="inner_div">
			<el-form ref='recommend_form' :model='recommend_form' :rules='rules' label-width="80px" size="medium">
				<el-form-item label='图书名称' prop='name'>
					<el-input v-model='recommend_form.name'></el-input>
				</el-form-item>
				<el-form-item label='出版社' prop='press'>
					<el-input v-model='recommend_form.press'></el-input>
				</el-form-item>
				<el-form-item label='作者' prop='author'>
					<el-input v-model='recommend_form.author'></el-input>
				</el-form-item>
				<el-form-item label='参考价格' prop='price'>
					<el-input v-model='recommend_form.price'></el-input>
				</el-form-item>
				<el-form-item label='书目类别' prop='class'>
					<el-select v-model='recommend_form.class' multiple placeholder='请选择' style='width: 100%;'>
						<el-option label='技术领域' value='1'></el-option>
						<el-option label='专业领域' value='2'></el-option>
						<el-option label='管理沟通' value='3'></el-option>
						<el-option label='其它' value='4'></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label='推荐人' prop='recommender'>
					<el-input v-model='recommender'></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type='primary' @click="submitForm('recommend_form')">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			let check = (rule, name, callback) => {
				if (!name) return callback(new Error('名称不能为空'));
				setTimeout(() => {
					callback();
				}, 100);
			};
			return {
				recommend_form: {
					name: '',
					press: '',
					author: '',
					price: '',
					recommender: '',
					class: ''
				},
				rules: {
					name: [{
						validator: check,
						trigger: 'blur'
					}],

				}
			};
		},
		methods: {
			submitForm: function(recommend_form) {
				this.$refs[recommend_form].validate((valid) => {
					if (valid) {
						this.$message.success('提交成功');
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style>
</style>
